<template>
  <div id="chartLinkMain" ref="chartLink" style="width:100%; height:calc(45vh - 56px);margin-top:10px;"></div>
</template>

<script>
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  props: {
    flowList: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    flowList: {
      handler (newValue, oldValue) {
        this.$nextTick(() => {
          this.chart.dispose()
          this.initChart(newValue)
        })
      },
      deep: true // 深度监听
    }

  },
  data () {
    return {
      chart: null,
      alarmList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart(this.flowList)
      // window.addEventListener('resize', () => { this.chart.resize() })
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    listData (val) {
      this.chart.setOption(this.option({ value: val }))
    },
    option (val) {
      var _that = this
      var tx_rate = []
      val.tx_rate.forEach(item => {
        tx_rate.push(Number(item).toFixed(2))
      })

      var rx_rate = []
      val.rx_rate.forEach(item => {
        rx_rate.push(Number(item).toFixed(2))
      })

      var rate = []
      val.rate.forEach(item => {
        rate.push(Number(item).toFixed(2))
      })

      var rx_max_rate = []
      val.rx_max_rate.forEach(item => {
        rx_max_rate.push(Number(item).toFixed(2))
      })

      var rx_min_rate = []
      val.rx_min_rate.forEach(item => {
        rx_min_rate.push(Number(item).toFixed(2))
      })

      var tx_max_rate = []
      val.tx_max_rate.forEach(item => {
        tx_max_rate.push(Number(item).toFixed(2))
      })

      var tx_min_rate = []
      val.tx_min_rate.forEach(item => {
        tx_min_rate.push(Number(item).toFixed(2))
      })

      var data = {
        title: {
          text: this.$t('接口速率趋势图')
        },
        tooltip: {
          trigger: 'axis',
          enterable: true,
          backgroundColor: 'rgba(255,255,255,0.8)',
          formatter (params) {
            var index = params[0].dataIndex
            let text = ''
            text += `${_that.$t('时间：') + params[0].name}</br>`
            for (let item of params) {
              if (item.seriesName === _that.$t('发送平均速率')) {
                text += `<span style="color:#5470c6;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('发送平均速率')}&nbsp:&nbsp${tx_rate[index]}KB/s</span></br>`
                text += `<span style="color:#5470c6;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('发送最高速率')}&nbsp:&nbsp${tx_max_rate[index]}KB/s</span></br>`
                text += `<span style="color:#5470c6;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('发送最低速率')}&nbsp:&nbsp${tx_min_rate[index]}KB/s</span></br>`
              } else if (item.seriesName === _that.$t('接收平均速率')) {
                text += `<span style="color:#91cc75;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('接收平均速率')}&nbsp:&nbsp${rx_rate[index]}KB/s</span></br>`
                text += `<span style="color:#91cc75;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('接收最高速率')}&nbsp:&nbsp${rx_max_rate[index]}KB/s</span></br>`
                text += `<span style="color:#91cc75;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('接收最低速率')}&nbsp:&nbsp${rx_min_rate[index]}KB/s</span></br>`
              } else if (item.seriesName === _that.$t('接口平均速率')) {
                text += `<span style="color:#fac858;font-size:18px;">●&nbsp;</span><span style="display:inline-block;">${_that.$t('接口平均速率')}&nbsp:&nbsp${rate[index]}KB/s</span></br>`
              }
            }
            return text
          }
        },
        legend: {
          type: 'scroll',
          padding: [0, 150]
          // data: ['PLC设备1', 'PLC设备2', 'PLC设备3', 'PLC设备4', 'PLC设备5']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: this.$t('时间'),
          data: val.time
        },
        yAxis: {
          type: 'value'
          // name: 'KB/s'
        },
        series: [
          {
            name: this.$t('发送平均速率'),
            type: 'line',
            showSymbol: false,
            data: tx_rate,
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: this.$t('接收平均速率'),
            type: 'line',
            showSymbol: false,
            data: rx_rate,
            itemStyle: {
              color: '#91cc75'
            }
          },
          {
            name: this.$t('接口平均速率'),
            type: 'line',
            showSymbol: false,
            data: rate,
            itemStyle: {
              color: '#fac858'
            }
          }
        ]
      }
      return data
    },
    initChart (data) {
      this.chart = this.$echarts.init(this.$refs.chartLink)
      this.chart.setOption(this.option(data), true)
    }
  }
}
</script>
